<template>
    <div class="select-multipe-module">
            <div class="label">{{label}}</div>
            <div class="select-items">
                <div 
                    class="all"
                    :class="!!selected && selected.length > 0 ? '' : 'active'" 
                    @click="all"
                >
                    全部
                </div>
                <div 
                    class="item-head" 
                    v-for="(item,ind) in arrData" 
                    :key="item[props.value]"
                >   
                    <div 
                    class="title" 
                    :class="item.isSelected ? 'active' : ''"
                    :style="{border: ind == 0? '0px' : ''}"
                    @click="clickHandler(item,props.children)"
                    >
                        {{`${item[props.label]}${item[props.children].length > 0 ? ':' : ''}`}}
                    </div>
                    <div 
                    class="childs" 
                    v-if="item[props.children].length > 0"
                    >
                        <div 
                        v-for="child in item[props.children]" 
                        :key="child[props.value]"
                        :class="child.isSelected ? 'active' : ''"
                        @click="clickHandler(child,props.children,item)"
                        >
                            {{child[props.label]}}
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
import appNode from '@js/app-node';
import MODEL from '@/mixins/model'
export default {
    mixins:[MODEL],
    props: {
        keyName:{
            type:String,
            default:""
        },
        label:{
            type:String,
            default:""
        },
        contentName:{
            type:String,
            default:""
        },
        options:{
            type:[Object,Array],
            default:(() => {})
        },
        props: {
            type: Object,
            default: function () {
                return {
				value: 'id',
				label: 'label',
                children: 'children'
                }
            }
        },

    },
    data() {
        return {
            arrData:[],
        }
    },
    watch: {
        options: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.arrData = appNode.clone(newValue);
            }
        },
        selected: {
            deep: true,
            handler(newValue, oldValue) {
                this.model = newValue.map(item => item[this.props.value]);
            }
        },
    },
    computed: {
        selected(){
            let breakArr = appNode.treeBreakArr(this.arrData,'children');
            let res = breakArr.array.filter(item => item.isSelected);
            return res;
        }
    },
    methods: {
        /**
         * 元素点击事件，如果传递fatherItem，则需必传childName
         * @param {Object} item 元素
         * @param {String} childName 字数组名称
         * @param {Object} fatherItem 父级元素
         */
        clickHandler(item,childName,fatherItem){
            const that  = this;
            let childrenArr = item[childName] || [];
            if(!!childrenArr && childrenArr.length > 0){
                // 如果存在子元素
                let status = '' //子元素状态：'0' 全未选中， '1' 全选中，'2' 部分选中;
                let len = childrenArr.length;
                let arr = childrenArr.filter(item1 => item1.isSelected);

                if(arr.length < len && arr.length != 0){
                    status = '2'
                }else if(arr.length == 0){
                    status = '0'
                }else if(arr.length == len){
                    status = '1'
                }

                let switchObj = {
                    '0':function(){
                        that.$set(item, 'isSelected',!item.isSelected );
                        for (let i = 0; i < childrenArr.length; i++) {
                            that.$set(item[childName][i], 'isSelected',!item[childName][i].isSelected );
                        }
                    },
                    '1':function(){
                        that.$set(item, 'isSelected',!item.isSelected );
                        for (let i = 0; i < childrenArr.length; i++) {
                            that.$set(item[childName][i], 'isSelected',!item[childName][i].isSelected );
                        }
                    },
                    '2':function(){
                        for (let i = 0; i < childrenArr.length; i++) {
                            that.$set(item[childName][i], 'isSelected',true );
                        }
                    },
                }

                switchObj[status]();

            }else{
                this.$set(item, 'isSelected',!item.isSelected );
                if(!!fatherItem){
                    // 如果存在父元素
                    let arr = fatherItem[childName].filter(item2 => item2.isSelected);

                    if(arr.length == 0){
                        this.$set(fatherItem, 'isSelected',false );
                    }else{
                        this.$set(fatherItem, 'isSelected',true );
                    }
                }
            }
        },
        all(){
            this.arrData = appNode.clone(this.options);
        }

    },
    mounted () {
        
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss'; 
.select-multipe-module{
    display: flex;
    // justify-content: space-between;

    .label{
        margin-top: 7px;
        padding-top: 6px;
        min-width: 70px;
        font-weight: 800;
        text-align: right;
    }

    .select-items{
        display: flex;
        // justify-content: space-between;
        align-content:flex-start;
        flex-wrap: wrap;
        // min-width: 750px;

        .all {
            cursor: pointer;
            padding:  6px;
            margin-right: 10px;
            margin-top: 7px;

            &:hover{
                background-color: $primaryColor;
                color: white;
            }
            &.active {
                background-color: $primaryColor;
                color: white;
            }
        }

        .item-head{
            display: flex;

            .title {
                cursor: pointer;
                padding: 0px 10px;
                margin-top: 13px;
                border-left: 1px solid rgb(22, 21, 21);
                height: 20px;

                &:hover{
                    color: $primaryColor;
                }
                &.active {
                    color: $primaryColor;
                }
            }

            .childs {
                display: flex;
                
                div {
                    cursor: pointer;
                    padding:  6px;
                    margin-right: 6px;
                    margin-top: 6px;

                    &:first-child{
                        margin-left: 10px;
                    }
                    
                    &:hover{
                        background-color: $primaryColor;;
                        color: white;
                    }

                    &.active {
                        background-color: $primaryColor;
                        color: white;
                    }

                }
                

                
            }
        }

    }

}
</style>